#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float plot(vec2 st){
    return smoothstep(.03,0.,abs(st.y-st.x));
}

void main(){
    vec2 st=gl_FragCoord.xy/u_resolution;
    
    // 为什么编译错误
    // float yv=st.x
    // 少了分号 注意到没
    // float yv=st.x;
    // vec3 color=vec3(yv);
    // gl_FragColor=vec4(color,1.);
    
    // 直线没有颜色混合
    // float pct=plot(st);
    // vec3 color=pct*vec3(1.,0.,0.);
    // gl_FragColor=vec4(color,1.);
    
    // float pct=plot(st);
    // vec3 color=pct*vec3(st.x,st.y,0.);
    // gl_FragColor=vec4(color,1.);
    
    //直线
    // float yv=st.x;
    // vec3 color=vec3(yv);
    // float pct=plot(st);
    // color=pct*vec3(st.x,st.y,0.);
    // gl_FragColor=vec4(color,1.);
    
    // 忽略y轴，只保留x轴，x轴值从0到1
    // float yv=st.x;
    // vec3 color=vec3(yv);
    // gl_FragColor=vec4(color,1.);
    
    // 直线底下有背景色
    float yv=st.x;
    vec3 color=vec3(yv);
    float pct=plot(st);
    // 好好理解这里的两个值相加 既想要背景颜色又想要直线颜色
    // 混合公式 (1.-pct)*color+pct*vec3(st.x,st.y,0.) 表示：color 的最终值是 color 和 vec3(st.x, st.y, 0.) 的线性组合，权重由 pct 决定。
    //当 pct 接近 0 时，color 接近 yv，即原始颜色；当 pct 接近 1 时，color 接近 vec3(st.x, st.y, 0.)，即新的颜色。
    color=(1.-pct)*color+pct*vec3(st.x,st.y,0.);
    gl_FragColor=vec4(color,1.);
    
}
